<template>
    <div>
        <Button @click="showUserChoose" :icon="icon">{{buttonText}}</Button>
        <span @click="clearUser" class="clear">清空已选</span>
        <Collapse simple class="collapse">
            <Panel name="1">
                已选择
                <span class="select-count">{{selectUsers.length}}</span> 人
                <p slot="content">
                    <Tag v-for="(item, i) in selectUsers" :key="i" :name="item.id" color="default" closable @on-close="handleCancelUser">{{item.userName}}</Tag>
                </p>
            </Panel>
        </Collapse>
    </div>
</template>

<script>
    export default {
        name: "userChooseBtn",
        components: {
        },
        props: {
            buttonText: {
                type: String,
                default: "选择用户"
            },
            icon: {
                type: String,
                default: "md-person-add"
            },
            clearUser: {
              type: Function,
              default: null
            },
            selectUsers: [],
            target: Object

        },
        data() {
            return {
                userModalVisible: false
            };
        },
        methods: {
            clearSelectUser() {
                this.selectUsers = [];
                this.$emit("on-change", this.selectUsers);
            },
            showUserChoose(){
                this.$emit('show-UserChose');
            },
            handleCancelUser(e, id) {
                // 删除所选用户
                let newArray = [];
                this.selectUsers.forEach(e => {
                    if (id != e.id) {
                        newArray.push(e);
                    }
                });
                this.selectUsers = newArray;
                this.$emit("on-change", this.selectUsers);
                this.$Message.success("删除所选用户成功");
            }
        }
    };
</script>

<style lang="less">
    .clear {
        font-size: 12px;
        margin-left: 15px;
        color: #40a9ff;
        cursor: pointer;
    }

    .collapse {
        font-size: 12px;
        margin-top: 15px;
        width: 500px;
    }

    .drawer-footer {
        z-index: 10;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .select-count {
        font-size: 13px;
        font-weight: 600;
        color: #40a9ff;
    }
</style>

